<template>
	<view>
		<view class="title-box" style="margin-top:153rpx;">
			<view class="title-img textc auto white fs28 fw500" style="z-index: 1;">
				{{ props.title }}
			</view>
			<view class="context-box posia mt20 dflex alc jcc pt20 mb20 pb20">
				<view class="context fs26 pb20">

					<view class="context-item dflex alc pl24 mb48">
						<image src="../../static/city.png" class="mr14"></image>
						<view>发行方：{{ props.company_name }}</view>
					</view>
<!-- 					<view class="context-item dflex alc pl24 mb48">
						<image src="../../static/box.png" class="mr14"></image>
						<view>担保方：{{ props.guarantee_bank }}</view>
					</view>
					<view class="context-item dflex alc pl24">
						<image src="../../static/phone.png" class="mr14"></image>
						<view>产品规模：{{ props.scale_money }}万元</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 分期月数 -->
		<view class="date auto dflex alc jcc pb20 pt20 mt20" v-if="props.yield_rate">
			<view class="date-box dflex jcse">
				<view class="date-item dflex alc flexd jcse">
					<view>综合收益率（年化）</view>
					<view class="fw900">{{ props.yield_rate }}</view>
				</view>
				<view class="date-item dflex alc flexd jcse">
					<view>产品期限</view>
					<view class="fs32 fw600">{{ props.cycle }}</view>
				</view>
			</view>
		</view>
		<!-- 分期月数结束 -->
	</view>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	company_name: {
		type: String,
		default: ''
	},

	yield_rate: {
		type: String,
		default: ''
	},
	cycle: {
		type: String,
		default: ''
	},
	scale_money: {
		type: String,
		default: ''
	},
	guarantee_bank: {
		type: String,
		default: ''
	}
});
</script>

<style lang="scss" scoped>
.title-box {
	width: 690rpx;
	height: 260rpx;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	.title-img {
		width: 570rpx;
		height: 68rpx;
		line-height: 68rpx;
		background-image: url('../../static/title-omg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.context-box {
		width: 690rpx;

		background: #fff8ed;
		border-radius: 30rpx;
		.context {
			width: 650rpx;

			border-radius: 15rpx;
			border: 2rpx solid rgba(235, 97, 18, 0.32);
			padding-top: 69rpx;
			.context-item {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}

.date {
	width: 690rpx;

	background: #fff8ed;
	border-radius: 30rpx;
	.date-box {
		width: 650rpx;
		height: 205rpx;
		border-radius: 15rpx;
		border: 2rpx solid rgba(235, 97, 18, 0.32);
		& > .date-item:nth-child(1) {
			& > view:nth-child(1) {
				color: #8a4620;
			}
			& > view:nth-child(2) {
				color: #e83e28;
				font-size: 45rpx;
			}
		}
		& > .date-item:nth-child(2) {
			& > view:nth-child(1) {
				color: #8a4620;
			}
			& > view:nth-child(2) {
				color: #3c1702;
			}
		}
	}
}
</style>
